<template>
  <view class="main-page">
    <image class="isbg" src="/static/images/bg.png" mode="aspectFill"></image>
    <scroll-view class="height100 bg-next" scroll-y :scroll-top="tab.top" :refresher-triggered="tab.refresh"
      @refresherrefresh="
        () => {
          getList();
        }
      " @scrolltolower="
        () => {
          getList(true);
        }
      " refresher-enabled>
      <view class="height20"></view>
      <view class="list">
        <view class="search-box">
          <input type="text" placeholder="请输入工单编号" v-model="keyword" @confirm="getList()" />
          <view class="btn" @click="getList()">
            <image class="btnbg" src="/static/images/search.png"></image>
          </view>
        </view>
        <view class="box">
          <view v-if="!tab.list || tab.list.length == 0" class="empty">
            {{ tab.loading ? "加载中..." : "暂无数据" }}
          </view>
          <view class="box-item" v-for="(item, i) in tab.list" :key="i" @click="toDetail(item)">
            <view class="box-info">
              <view class="box-text">
                办结情况：
                <text :class="!item.completionStatus ? 'is-red' : ''">{{
                  item.completionStatus | getDictTxt(statusList)
                }}</text>
              </view>
              <view class="box-text">工单编号：{{ item.number || "--" }}</view>
              <view class="box-text" v-if="item.billTheme">工单主题：{{ item.billTheme || "--" }} -
                {{ item.billThemeSub || "--" }}</view>
              <view class="box-text" v-else>工单主题：--</view>
              <view class="box-text">客户名称：{{ item.customName || "--" }}</view>
              <view class="box-text">联系方式：{{ item.customPhone || "--" }}</view>
              <view class="box-text" v-if="!item.completionStatus">到期时间：<text class="is-red">{{
                item.endTime | getDate
              }}</text></view>
              <view class="detaiboxl-text" v-if="item.completionStatus">办结时间：<text>{{
                item.completionTime | getDate
              }}</text></view>
            </view>
          </view>
        </view>
      </view>
      <view class="height20"></view>
    </scroll-view>
  </view>
</template>

<script>
import { baseUrl, getDictTxt, getDate } from "@/static/js/utils.js";
import { getDict } from "@/api/system";
import { getList } from "@/api/hotline";
export default {
  name: "claim",
  props: {},
  data() {
    return {
      baseUrl,
      tabIndex: 0,
      tab: {
        label: "列表",
        value: "0",
        list: [],
        page: 0,
        top: 0,
        refresh: false,
        loading: false,
        stop: false,
      },
      basePager: {
        page: 1,
        limit: 10,
      },
      keyword: "",
      statusList: [],
    };
  },
  computed: {},
  filters: { getDictTxt, getDate },
  methods: {
    getDict() {
      getDict({
        data: { keyword: "order_completion_status" },
        callback: ({ data }) => {
          this.statusList = data;
        },
      });
    },
    toDetail(item) {
      if (item.treeSubStatus == "0") {
        return;
      }
      uni.navigateTo({
        url: "detail?id=" + item.id,
      });
    },
    getList(addPage = false) {
      const chooseTab = this.tab;
      if ((chooseTab.stop || chooseTab.loading) && addPage) {
        return;
      }
      if (!addPage) {
        chooseTab.stop = false;
        chooseTab.page = this.basePager.page - 1;
        addPage === 0 ? null : (chooseTab.refresh = true);
      }
      chooseTab.page += 1;
      chooseTab.loading = true;
      const params = {
        number: this.keyword,
        transferStatus: true,
        pageSize: this.basePager.limit,
        pageNo: chooseTab.page,
      };
      Object.keys(params).forEach((k) => {
        if (!params[k]) {
          delete params[k];
        }
      });
      getList({
        data: params,
        callback: ({ data }) => {
          this.setList(chooseTab, addPage, data);
        },
        error: () => {
          chooseTab.refresh = false;
          chooseTab.loading = false;
          chooseTab.stop = true;
        },
      });
    },
    setList(chooseTab, addPage, data) {
      let { list: rows, total } = data;
      if (rows.length == 0) {
        addPage ? null : (chooseTab.list = []);
        chooseTab.stop = true;
      } else {
        rows = rows.map((v) => {
          let avatar = "";
          try {
            avatar = v.treePaths[0].avatar;
          } catch (error) { }
          return { ...v, avatar };
        });
        chooseTab.list = addPage
          ? [...chooseTab.list, ...(rows || [])]
          : [...(rows || [])];
        chooseTab.stop = total <= chooseTab.list.length;
      }
      chooseTab.refresh = false;
      chooseTab.loading = false;
      // console.log(chooseTab)
    },
  },
  watch: {},
  onShow() {
    this.keyword = "";
    this.getList();
  },
  onLoad() {
    this.getDict();
  },
};
</script>

<style lang="scss" scoped></style>
